{% extends 'base.html' %}
{% block content %}
    <style>
        .table-admin_list {
            position: fixed;
            max-width: 50%; /* 设置容器的最大宽度 */
            left: 25%;
            width: 50%;
            margin: 5% auto;
            padding: 15px; /* 添加一些内边距 */
            background-color: #f8f9fa; /* 设置背景颜色 */
            border: 1px solid rgba(221, 221, 221, 0.67); /* 添加边框 */
            border-radius: 5px; /* 添加圆角 */

        }</style>
    {{ admin_user }}
    <div class="table-admin_list">
        <table class="table table-bordered">
            <div class="d-flex">
                <div class="input-group mb-3">
                    <a class="btn btn- btn-primary" href="{% url 'device:admin_register' %}" role="button"><i
                            class="fa-solid fa-plus fa-beat-fade"></i>新增</a>
                </div>
            </div>
            <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">姓名</th>
                <th scope="col">超级管理员</th>
                <th scope="col">邮箱</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            {% if admin_users %}
                {% for admin_user in admin_users %}
                    <tr>
                        <td>{{ admin_user.id }}</td>
                        <td>{{ admin_user.username }}</td>
                        <td>{{ admin_user.is_superuser }}</td>
                        <td>{{ admin_user.email }}</td>

                        <td>
                            <a class="btn btn-primary" href="{% url 'device:admin_updata' admin_user.id %}"
                               role="button"><span title="修改"><i class="fa-solid fa-pen-to-square"></i></span></a>
                            <a class="btn btn-danger" href="{% url 'device:admin_delete' admin_user.id %}"
                               role="button"><span title="删除"><i class="fa-solid fa-trash"></i></span></a></td>
                    </tr>
                {% endfor %}
            {% else %}
                <P>no data</P>
            {% endif %}
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item ">
                    {% if admin_users.has_previous %}
                        <a class="page-link" href="?page={{ admin_users.previous_page_number }}">上一页 </a>
                    {% else %}
                        <a class="page-link" href="?page={{ current_page }}">上一页 </a>
                    {% endif %}
                </li>
                {% for page_num in  admin_users.paginator.page_range %}
                    {% if page_num == current_page %}
                        <li class="page-item active"><a class="page-link"
                                                        href="?page={{ page_num }}"><span>{{ page_num }}</span></a></li>
                    {% else %}
                        <li class="page-item"><a class="page-link"
                                                 href="?page={{ page_num }}"><span>{{ page_num }}</span></a></li>
                    {% endif %}
                {% endfor %}
                <li class="page-item">
                    {% if admin_users.has_next %}
                        <a class="page-link" href="?page={{ admin_users.next_page_number }}">下一页 </a>
                    {% else %}
                        {{ page_obj }}
                        <a class="page-link" href="?page={{ current_page }}">下一页 </a>
                    {% endif %}
                </li>
            </ul>
        </nav>
    </div>
{% endblock %}